<div class="span9  " id="content">

	<div class="breadcrumb">
		<a href="<?php echo $this->webroot; ?>">Trang chủ</a>
		» <a href="<?php echo $this->webroot; ?>category?categoryId=<?php echo $categoryName['Category']['id']; ?>" class="last">
			<?php echo $categoryName['Category']['category_name']; ?>
		</a>
	</div>
	
	<div class="product-info">
		<div class="row">
			<div class="span3">
			
				<h1 class="view"><?php echo $detail['Product']['product_name']; ?></h1>
				
				<script type="text/javascript">
					jQuery(document).ready(function(){
					var myPhotoSwipe = $("#gallery a").photoSwipe({ enableMouseWheel: false , enableKeyboard: false, captionAndToolbarAutoHideDelay:0 });
					});
				</script>
				
				<div id="full_gallery">
					<div class="bx-wrapper" style="max-width: 100%;">
						<div class="bx-viewport" style="width: 100%; overflow: hidden; position: relative; height: 0px;">
							
							<ul id="gallery" style="width: 645%; position: relative; -webkit-transition: 0s; transition: 0s; -webkit-transform: translate3d(0px, 0px, 0px);">
								
								<li style="float: left; list-style: none; position: relative; width: 100px;">
									<a href="<?php echo $detail['Product']['sub_img1']; ?>" data-something="something" data-another-thing="anotherthing">
										<img src="<?php echo $detail['Product']['sub_img1']; ?>" alt="<?php echo $detail['Product']['product_name']; ?>">
									</a>
								</li>
								
								<li style="float: left; list-style: none; position: relative; width: 100px;">
									<a href="<?php echo $detail['Product']['sub_img2']; ?>" data-something="something1" data-another-thing="anotherthing1">
										<img src="<?php echo $detail['Product']['sub_img2']; ?>" alt="<?php echo $detail['Product']['product_name']; ?>">
									</a>
								</li>
								
								<li style="float: left; list-style: none; position: relative; width: 100px;">
									<a href="<?php echo $detail['Product']['sub_img3']; ?>" data-something="something1" data-another-thing="anotherthing1">
										<img src="<?php echo $detail['Product']['sub_img3']; ?>" alt="<?php echo $detail['Product']['product_name']; ?>">
									</a>
								</li>
								
							</ul>
							
						</div>
						
						<div class="bx-controls bx-has-controls-direction">
							<div class="bx-controls-direction"><a class="bx-prev" href=""><i class="icon-chevron-left"></i></a><a class="bx-next" href=""><i class="icon-chevron-right"></i></a></div>
						</div>
						
					</div>
				</div>
				
				<div id="default_gallery" class="left spacing">
					<div class="zoom-top">
						<a href="<?php echo $detail['Product']['sub_img1']; ?>" title="<?php echo $detail['Product']['product_name']; ?>" data-gal="prettyPhoto[gallery1]">
						<img src="" title="<?php echo $detail['Product']['product_name']; ?>" alt="<?php echo $detail['Product']['product_name']; ?>">
						</a>
					</div>
					<div class="zoom-top">
						<a href="<?php echo $detail['Product']['sub_img2']; ?>" title="<?php echo $detail['Product']['product_name']; ?>" data-gal="prettyPhoto[gallery1]">
						<img src="" title="<?php echo $detail['Product']['product_name']; ?>" alt="<?php echo $detail['Product']['product_name']; ?>">
						</a>
					</div>
					<div class="zoom-top">
						<a href="<?php echo $detail['Product']['sub_img3']; ?>" title="<?php echo $detail['Product']['product_name']; ?>" data-gal="prettyPhoto[gallery1]">
						<img src="" title="<?php echo $detail['Product']['product_name']; ?>" alt="<?php echo $detail['Product']['product_name']; ?>">
						</a>
					</div>
					
					<div class="image">
						<div id="wrap" style="top:0px;z-index:9999;position:relative;">
							<a href="<?php echo $detail['Product']['sub_img1']; ?>" title="<?php echo $detail['Product']['product_name']; ?>" class="cloud-zoom" id="zoom1" rel="position: &#39;right&#39;" style="position: relative; display: block;">
								<img src="<?php echo $detail['Product']['sub_img1']; ?>" title="<?php echo $detail['Product']['product_name']; ?>" alt="<?php echo $detail['Product']['product_name']; ?>" style="display: block;">
							</a>
							<div class="mousetrap" style="background-image:url(&quot;.&quot;);z-index:999;position:absolute;width:270px;height:231px;left:0px;top:0px;"></div>
						</div>
						
						<a href="<?php echo $detail['Product']['sub_img1']; ?>" title="<?php echo $detail['Product']['product_name']; ?>">
							<!--<img id="image" src="<?php echo $detail['Product']['sub_img1']; ?>" title="<?php echo $detail['Product']['product_name']; ?>" alt="<?php echo $detail['Product']['product_name']; ?>" />-->
						</a>
					</div>
					
					<div class="image-additional">
						<div class="bx-wrapper" style="max-width: 230px;">
							<div class="bx-viewport" style="width: 100%; overflow: hidden; position: relative; height: 60px;">
								
								<ul id="image-additional" style="width: 645%; position: relative; -webkit-transition: 0s; transition: 0s; -webkit-transform: translate3d(0px, 0px, 0px);">
									
									<li style="float: left; list-style: none; position: relative; width: 70px; margin-right: 10px;">
										<a href="<?php echo $detail['Product']['sub_img1']; ?>" title="<?php echo $detail['Product']['product_name']; ?>" class="cloud-zoom-gallery" rel="useZoom: &#39;zoom1&#39;, smallImage: &#39;<?php echo $detail['Product']['sub_img1']; ?>&#39; ">
											<img src="<?php echo $detail['Product']['sub_img1']; ?>" title="<?php echo $detail['Product']['product_name']; ?>" alt="<?php echo $detail['Product']['product_name']; ?>">
										</a>
									</li>
									
									<li style="float: left; list-style: none; position: relative; width: 70px; margin-right: 10px;">
										<a href="<?php echo $detail['Product']['sub_img2']; ?>" title="<?php echo $detail['Product']['product_name']; ?>" class="cloud-zoom-gallery" rel="useZoom: &#39;zoom1&#39;, smallImage: &#39;<?php echo $detail['Product']['sub_img2']; ?>&#39; ">
											<img src="<?php echo $detail['Product']['sub_img2']; ?>" title="<?php echo $detail['Product']['product_name']; ?>" alt="<?php echo $detail['Product']['product_name']; ?>">
										</a>
									</li>
									
									<li style="float: left; list-style: none; position: relative; width: 70px; margin-right: 10px;">
										<a href="<?php echo $detail['Product']['sub_img3']; ?>" title="<?php echo $detail['Product']['product_name']; ?>" class="cloud-zoom-gallery" rel="useZoom: &#39;zoom1&#39;, smallImage: &#39;<?php echo $detail['Product']['sub_img3']; ?>&#39; ">
											<img src="<?php echo $detail['Product']['sub_img3']; ?>" title="<?php echo $detail['Product']['product_name']; ?>" alt="<?php echo $detail['Product']['product_name']; ?>">
										</a>
									</li>
									
								</ul>
								
							</div>
							
							<div class="bx-controls bx-has-controls-direction">
								<div class="bx-controls-direction">
									<a class="bx-prev disabled" href="">
										<i class="icon-chevron-left"></i>
									</a>
									<a class="bx-next disabled" href="">
										<i class="icon-chevron-right"></i>
									</a>
								</div>
							</div>
						</div>
						<div class="clear"></div>
					</div>
				</div>
			</div>
			<div class="span6">
				<h1><?php echo $detail['Product']['product_name']; ?></h1>
				<div class="description">
					<div class="product-section">
					
						<span>Xuất xứ:</span> <a href="#"><?php echo $detail['Product']['made_in']; ?></a><br>
						
						<span>Tình trạng:</span>
						
						<?php if($detail['Product']['status'] == '1') { ?>
							<div class="prod-stock">Còn hàng</div>
						<?php } else { ?>
							<div class="prod-stock">Hết hàng</div>
						<?php } ?>
						
					</div>
					
					<?php echo $detail['Product']['description']; ?>
					
					<div class="price">
						<span class="text-price">Giá:</span>
						<span class="price-new">$<?php echo $detail['Product']['price']; ?></span>
					</div>
					
					<div class="clear"></div>
					<div class="share">
					
						<!-- AddThis Button BEGIN -->
						<span>Lượt xem: <?php echo $detail['Product']['view']; ?></span>
						<br>
						<span class="st_facebook_hcount" displaytext="Facebook" st_processed="yes">
							<div id="fb-root"></div>
							<script>(function(d, s, id) {
							  var js, fjs = d.getElementsByTagName(s)[0];
							  if (d.getElementById(id)) return;
							  js = d.createElement(s); js.id = id;
							  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=274025322759817";
							  fjs.parentNode.insertBefore(js, fjs);
							}(document, 'script', 'facebook-jssdk'));</script>
							
							<div class="fb-share-button" data-href="<?php echo Router::url($this->here, true); ?>" data-type="button_count"></div>
							
						</span>
						<br>
						<span class="st_facebook_hcount" displaytext="Google +" st_processed="yes">
							
							<script type="text/javascript" src="https://apis.google.com/js/platform.js">
							  {lang: 'vi'}
							</script>
							<div class="g-plusone" data-href="<?php echo Router::url($this->here, true); ?>"></div>
						</span>
						
						<!-- AddThis Button END -->
					</div>
				</div>
			</div>
		</div>
		<div class="tabs">
			<div class="tab-heading">
				Chi tiết		
			</div>
			<div class="tab-content">
				<?php echo $detail['Product']['detail']; ?>
			</div>
		</div>		
		
	</div>
	
	<h1 class="style-1 mt0">Sản phẩm tương tự</h1>
	<div class="related">
		<div class="box-product">
			<div class="bx-wrapper" style="max-width: 770px;">
				<div class="bx-viewport" style="width: 100%; position: relative; height: 341px;">
					
					<ul style="width: 1075%; position: relative; -webkit-transition: 0s; transition: 0s; -webkit-transform: translate3d(0px, 0px, 0px);">
						
						<?php foreach($sameList as $item): ?>
						    <li class="related-info" style="float: left; list-style: none; position: relative; width: 170px; margin-right: 30px;">
								<div class="image">
									<a href="<?php echo $this->webroot; ?>productDetail?productId=<?php echo $item['Product']['id']; ?>">
										<img id="img_29" src="<?php echo $item['Product']['sub_img1']; ?>" alt="<?php echo $item['Product']['product_name']; ?>">
									</a>
								</div>
								<div class="inner_related">
								
									<div class="name maxheight-relat" style="height: 40px;">
										<a href="<?php echo $this->webroot; ?>productDetail?productId=<?php echo $item['Product']['id']; ?>">
											<?php echo $item['Product']['product_name']; ?>
										</a>
									</div>
									
									<div class="price">
										$<?php echo $item['Product']['price']; ?>								
									</div>
									<div class="cart-button">
									
										<div class="cart">
											<a title="Chi tiết" class="button ">						
												<span>Chi tiết</span>
											</a>
										</div>
										
										<span class="clear"></span>
									</div>
								</div>
							</li>
						<?php endforeach; ?>
						
					</ul>
				</div>
			</div>
		</div>
	</div>
	
	<div class="tabs" id="tab-review">
		<div class="tab-heading">
			Nhận xét	
		</div>
		<div class="tab-content">
			
			<div id="fb-root"></div>
			<script>(function(d, s, id) {
			  var js, fjs = d.getElementsByTagName(s)[0];
			  if (d.getElementById(id)) return;
			  js = d.createElement(s); js.id = id;
			  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=274025322759817";
			  fjs.parentNode.insertBefore(js, fjs);
			}(document, 'script', 'facebook-jssdk'));</script>

			<div class="fb-comments" data-href="<?php echo Router::url($this->here, true); ?>" data-width="800" data-numposts="10" data-colorscheme="light"></div>
		</div>
	</div>
</div>